import React from 'react';

import { RingProgress } from '@ant-design/charts';

import styles from './index.css';

export interface AssetProps {
  percent?: number;
  title?: string;
  detail?: string;
  detailEn?: string;
  count?: number;
}

export class Asset extends React.Component<AssetProps, {}> {
  static defaultProps = {
    percent: 0,
    title: '-',
    detail: '-',
    detailEn: '-',
    count: 0,
  };

  constructor(props: AssetProps) {
    super(props);
  }

  prepareOption = () => {
    return {
      height: 30,
      width: 30,
      autoFit: false,
      percent: (this.props.percent || 0) / 100,
      progressStyle: (param: any) => {
        if (param.type === 'current') {
          return { fill: 'rgb(131, 229, 247)' };
        }
        return {
          fill: 'rgb(24,54,96)',
          lineDash: [1, 1],
          stroke: '#333',
        };
      },
      statistic: {
        content: {
          formatter: () => '',
        },
      },
    };
  };

  render() {
    const { title, detail, detailEn, percent, count } = this.props;

    return (
      <div className={styles.competed}>
        <div className={styles.title}>{title}</div>
        <div className={styles.jobDetail}>{detail}</div>
        <div className={styles.jobDetailE}>{detailEn}</div>
        <div className={styles.jobProgress}>
          <RingProgress {...this.prepareOption()} />
        </div>
        <div className={styles.jobPercent}>{percent}%</div>
        <div className={styles.jobCount}>{count?.toLocaleString()}<span className={styles.jobCountUnit}>次</span></div>
      </div>
    );
  }
}
